<template>
  <view>
      <view :class="s.remark">
          <image :src="user.avatar" :class="s.img"></image>
          <view :class="s.right">
              <text :class="s.realname">
          {{user.realname}}
              </text>
              <text>
                  {{user.time}}
              </text>
              <view>
                  {{user.content}}
              </view>
      <remark-item :commentId="user.id"></remark-item>

          </view>
      </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, reactive, toRefs } from "vue";
import Taro from "@tarojs/taro"
import {getCurrentInstance} from "@tarojs/taro"
import remarkItem from "./remarkItem/remarkItem.vue"
export default defineComponent({
    components:{
        remarkItem
    },
    setup(){
        let remarkInfo = reactive({
                user:{
                    avatar:"",
            username:"",
            realname:"",
            time:"",
            content:"",
            id:""
                }
        })
        onBeforeMount(()=>[
            getRemarkData()
        ])
        let getRemarkData = async ()=>{
            let blogId:string|undefined = getCurrentInstance().router?.params.id
            let data = await Taro.request({
                url:'https://www.ttzxh.icu/api/comment/search',
                data:{
                    blogId
                }
            })
            if(data.data.error===-1){
            let {time,realname,username,content,id,avatar} = data.data.data[0]
            remarkInfo.user= {avatar,realname,time,username,content,id}
            }
        }
        return {
            ...toRefs(remarkInfo)
        }
    }
})
</script>

<style lang="scss" module="s">
.remark{
    border-top: 1px solid #ddd;
    padding: 10Px 15Px;
    display: flex;
    justify-content: space-between;
    align-items: center;
.img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff;
    vertical-align: middle;
}
.realname{
    margin-right: 10px;
}
.right{
    width: 570px;
}

}

</style>